<template>
    <div>
        <!-- vuex里面的东西都是使用时候，都是store提供的 -->
        <h1>当前求和为：{{ $store.state.sum }}</h1>
        <!-- 直接调用vuex里面的 getters -->
        <h1>1当前求和放大10倍为：{{ $store.getters.bigSum }}</h1>
        <h1>2当前求和放大10倍为：{{ bigSum }}</h1>
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
        <button @click="incrementOdd">当前求和为奇数再加</button>
        <button @click="incrementWait">等一等再加</button>
        <br>
        <!-- 使用mapState和mapGetters -->
        <h2>1我在{{ xuexiao }},学习{{ xueke }}</h2>
        <h2>2我在{{ school }},学习{{ subject }}</h2>
        <!-- 使用mapMutations，记得事件传值 -->
        <button @click="increment2(n)">+</button>
        <!-- <button @click="JIA(n)">+</button> -->
        <button @click="decrement2(n)">-</button>
    </div>
</template>

<script>
// 引入使用mapState，mapGetters
import { mapState, mapGetters, mapMutations } from "vuex";

export default {
    name: 'Count',
    data() {
        return {
            n: 1
        }
    },
    computed: {
        // mapState第一种写法，生成计算属性，从state中读取数据
        ...mapState({ xuexiao: 'school', xueke: 'subject' }),

        // mapState第二种写法，数组格式，相当于计算熟悉里的函数要和state里的属性名一样
        ...mapState(['school', 'subject']),
        // 如果有定义多个store，这样写，abcOptions是在store里面的
        // ...mapState('abcOptions', ['school', 'subject']),

        ...mapGetters(['bigSum'])
    },
    methods: {
        increment() {
            // dispatch 调用到actions里面
            this.$store.dispatch('jia', this.n)
        },
        decrement() {
            // 当actions里面的逻辑没什么意义时候，可以直接调用commit执行到mutations里面的对应函数
            this.$store.commit('JIAN', this.n)
        },
        incrementOdd() {
            this.$store.dispatch('jiaOdd', this.n)
        },
        incrementWait() {
            setTimeout(() => {
                this.$store.dispatch('jia', this.n)
            }, 1000);
        },

        // 写法一
        ...mapMutations({ increment2: 'JIA', decrement2: 'JIAN' }),
        // 写法二，这样简写的话，标签中调用事件名字要改
        // ...mapMutations(['JIA','JIAN']),
    }
}
</script>